<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>登录</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <h1>登录页面</h1>

    <form>
        用户名：<input type="text" name="name"><br>
        密码：<input type="password" name="password"><br>
        <button type="submit">登录</button>
    </form>

    <script>
        const $form = $('form')
        $form.on('submit', (e) => {
            e.preventDefault()      // 阻止表单的默认事件（表单提交时会刷新网页）
            const name = $form.find('input[name="name"]').val()
            const password = $form.find('input[name="password"]').val()
            console.log(name, password)
            $.ajax({
                method: 'POST',
                url: '/signIn',
                contentType: 'text/json; charset=UTF-8',
                data: JSON.stringify({ name, password })
            }).then(() => {
                alert('登录成功')
                location.href = '/index.html'
            }, (err) => {
                const { responseText } = err
                const { errCode, errMsg } = JSON.parse(responseText)
                alert(errMsg)
            })
        })
    </script>
</body>
</html>